<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="100px">
      <el-form-item label="物流状态" prop="status">
        <el-select v-model="queryParams.status" placeholder="请选择物流状态" clearable>
          <el-option v-for="dict in dict.type.ems_status" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="订单编号" prop="orderSerial">
        <el-input v-model="queryParams.orderSerial" placeholder="请输入订单编号" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="店铺名称" prop="storeName">
        <el-input v-model="queryParams.storeName" placeholder="请输入店铺名称" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="创建时间">
        <el-date-picker v-model="dateRange" style="width: 240px" value-format="yyyy-MM-dd" type="daterange"
          range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
      </el-form-item>
      <el-form-item label="用户id" prop="userId">
        <el-input v-model="queryParams.userId" placeholder="请输入用户id" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="收件人姓名" prop="toUser">
        <el-input v-model="queryParams.toUser" placeholder="请输入收件人姓名" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="收件人手机号" prop="toPhone">
        <el-input v-model="queryParams.toPhone" placeholder="请输入收件人手机号" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="收件人地址" prop="emsTo">
        <el-input v-model="queryParams.emsTo" placeholder="请输入收件人地址" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item>
        <el-button v-hasPermi="['store:ems:list']" type="primary" icon="el-icon-search" size="mini"
          @click="handleQuery">查询</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="productinfoList" style="width: 100%" :max-height="tableHeight()">
      <el-table-column prop="orderSerial" align="left" label="订单编号">
      </el-table-column>
      <el-table-column prop="crTime" align="left" label="创建时间">
        <template slot-scope="scope">
          <div v-for="(item, index) in scope.row.htEmsList" :key="index" class="mesSty">
            {{removeSeconds(item.crTime)}}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="storeName" align="left" label="店铺名称">
        <template slot-scope="scope">
          <div v-for="(item, index) in scope.row.htEmsList" :key="index" class="mesSty">
            {{item.storeName}}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="backSerial" align="left" label="商品" width="350">
        <template slot-scope="scope">
          <div style="margin-top: 5px;margin-bottom: 5px;box-sizing: border-box;"
            v-for="(item, index) in scope.row.htEmsList" :key="index" class="mesSty">
            <div style="display: flex">
              <div style="width: 100px;height: 100px;">
                <el-image style="width: 100px; height: 100px" :preview-src-list="[item.mainPic]" :src="item.mainPic"
                  fit="contain"></el-image>
              </div>
              <div
                style="width: 250px;display: flex;flex-direction:column;justify-content: center;padding-left: 10px;padding-right: 20px;box-sizing: border-box;">
                <div>
                  <el-tooltip class="item" effect="dark" placement="top" :content="item.productName">
                    <div class="cell-ellipsis">{{ item.productName }}</div>
                  </el-tooltip>
                </div>
                <div><el-tooltip class="item" effect="dark" placement="top" :content="item.specification">
                    <div class="cell-ellipsis">{{ item.specification }}</div>
                  </el-tooltip></div>
              </div>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="salePrice" align="left" label="商品金额">
        <template slot-scope="scope">
          <div v-for="(item, index) in scope.row.htEmsList" :key="index" class="mesSty">
            <span style="font-weight: bold;color: #f00;">¥{{item.salePrice}}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="productNumb" align="left" label="商品数量">
        <template slot-scope="scope">
          <div v-for="(item, index) in scope.row.htEmsList" :key="index" class="mesSty">
            <span>x{{item.productNumb}}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="productRemark" align="left" label="买家备注">
        <template slot-scope="scope">
          <div v-for="(item, index) in scope.row.htEmsList" :key="index" class="mesSty">
            {{item.productRemark}}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="emsNum" align="left" label="快递单号">
        <template slot-scope="scope">
          <div v-for="(item, index) in scope.row.htEmsList" :key="index" class="mesSty">
            {{item.emsNum}}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="status" align="center" label="物流状态">
        <template slot-scope="scope">
          <div v-for="(item, index) in scope.row.htEmsList" :key="index" class="mesSty">
            <div>
              <el-tag size="medium">
                <dict-tag :options="dict.type.ems_status" :value="item.status" />
              </el-tag>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="backSerial" align="center" label="物流轨迹">
        <template slot-scope="scope">
          <div v-for="(item, index) in scope.row.htEmsList" :key="index" class="mesSty">
            <el-button size="mini" type="text" @click="viewTrail(item)">查看</el-button>
          </div>
        </template>
      </el-table-column>
      <!-- <el-table-column align="center" label="详情">
        <template slot-scope="scope">
          <el-table :data="scope.row.htEmsList">
            <el-table-column prop="crTime" align="center" label="创建时间">
            </el-table-column>
            <el-table-column prop="storeName" align="center" label="店铺名称">
            </el-table-column>
            <el-table-column prop="backSerial" align="center" label="商品" width="350">
              <template slot-scope="scope">
                <div style="display: flex;">
                  <div style="width: 100px;height: 100px;">
                    <el-image style="width: 100px; height: 100px" :src="scope.row.mainPic"
                      :preview-src-list="[scope.row.mainPic]" fit="contain"></el-image>
                  </div>
                  <div
                    style="width: 250px;display: flex;flex-direction:column;justify-content: center;padding-left: 10px;padding-right: 20px;box-sizing: border-box;">
                    <div>
                      <el-tooltip class="item" effect="dark" placement="top" :content="scope.row.productName">
                        <div class="cell-ellipsis">{{ scope.row.productName }}</div>
                      </el-tooltip>
                    </div>
                    <div><el-tooltip class="item" effect="dark" placement="top" :content="scope.row.specification">
                        <div class="cell-ellipsis">{{ scope.row.specification }}</div>
                      </el-tooltip></div>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="salePrice" align="center" label="商品金额">
              <template slot-scope="scope">
                <span style="font-weight: bold;color: #f00;">{{scope.row.salePrice}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="productNumb" align="center" label="商品数量">
              <template slot-scope="scope">
                <span style="font-weight: bold;color: #f00;">x{{scope.row.productNumb}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="backSerial" align="center" label="备注">
            </el-table-column>
            <el-table-column prop="emsNum" align="center" label="快递单号">
            </el-table-column>
            <el-table-column prop="status" align="center" label="物流状态">
              <template slot-scope="scope">
                <el-tag size="medium">
                  <dict-tag :options="dict.type.ems_status" :value="scope.row.status" />
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="backSerial" align="center" label="物流轨迹">
              <template slot-scope="scope">
                <div @click="viewTrail(scope.row)">查看</div>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-table-column> -->
      <el-table-column prop="orderSerial" align="left" label="买家收货信息" width="180">
        <template slot-scope="scope">
          <div style="text-align: left;">
            {{scope.row.toUser}}，{{telephoneDesen(scope.row.toPhone)}}，{{scope.row.htEmsList[0].emsToPrefix}} {{scope.row.emsTo}}
          </div>
          <!-- <div @click="userAddress(scope.row)"></div> -->
          <el-button size="mini" v-hasPermi="['store:ems:edit']" type="text"
            @click="userAddress(scope.row)">修改</el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="180">
        <template slot-scope="scope">
          <router-link :to="'/order/productDeliveryDetails/' + scope.row.orderSerial">
            <el-button v-hasPermi="['store:ems:edit']" v-if="scope.row.sendGoods" size="mini" type="text"
              @click="viewDetails(scope.row)">发货</el-button>
            <el-button v-else size="mini" type="text" disabled>发货</el-button>
          </router-link>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getProductinfoNew" />


    <el-dialog title="提示" :visible.sync="dialogInfoVisible" width="30%" @close="dialogInfoVisible = false">
      <el-form ref="editform" :model="editParams" :rules="rules" label-width="160px">
        <el-form-item label="收货人" prop="toUser">
          <el-input v-model="editParams.toUser" placeholder="请输入收货人" />
        </el-form-item>
        <el-form-item label="收货电话" prop="toPhone">
          <el-input v-model="editParams.toPhone" placeholder="请输入收货电话" />
        </el-form-item>
        <el-form-item label="收货地址" prop="backProvinceCityCountry">
          <el-cascader v-model="editParams.backProvinceCityCountry" :options="addressXz" :props="propsObj"
            @change="backHandleChange"></el-cascader>
        </el-form-item>
        <el-form-item label="详细地址" prop="emsTo">
          <el-input v-model="editParams.emsTo" placeholder="请输入详细地址" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogInfoVisible = false">取 消</el-button>
        <el-button type="primary" @click="editInfo('editform')">确 定</el-button>
      </span>
    </el-dialog>


    <el-dialog title="物流轨迹" :visible.sync="dialogVisible" @close="dialogVisible = false" width="50%">
      <div style="max-height: 550px;overflow: auto;">
        <el-timeline :reverse="true">
          <el-timeline-item v-for="(activity, index) in activities" :key="index" :timestamp="activity.ftime">
            {{activity.context}}
          </el-timeline-item>
        </el-timeline>
      </div>
      <span slot="footer" class="dialog-footer" style="text-align: center;">
          <el-button @click="dialogVisible = false">取 消</el-button>
        </span>
    </el-dialog>



  </div>
</template>

<script>
  import {
    getOrderAddress,
  } from "@/api/system/user";
  import {
    getProductinfoNew,
  } from "@/api/store/productinfo";

  import {
    getShopemsList,
    geteditList
  } from "@/api/store/orderhead";

  export default {
    name: "Productinfo",
    dicts: ['product_flag', 'ems_status'],
    data() {
      return {
        groundVisible: false, //上架
        offShelfVisible: false, //下架
        nestedTableData: [],
        dictArr: [{
            value: '0',
            label: '未生效'
          },
          {
            value: '1',
            label: '已生效'
          }
        ],
        tableData: [],
        dialogVisible: false,
        dialogInfoVisible: false,
        dialogTitle: '',
        tabPosition: 'left',
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 商品类目表格数据
        productinfoList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          orderSerial: '',
          storeName: '',
          toUser: '',
          toPhone: '',
          emsTo: '',
          status: '',
          userId: ''
        },
        // 表单参数
        form: {},
        xlsFile: [],
        fileListN: [],
        listNew: [],
        xlsFile1: [],
        fileListN1: [],
        listNew1: [],
        rules: {
          toUser: [{
            required: true,
            message: '请选择退货人',
            trigger: 'change'
          }, ],
          toPhone: [{
            required: true,
            message: '请输入退货人手机号',
            trigger: 'change'
          }, ],
          emsTo: [{
            required: true,
            message: '请选择退货地址',
            trigger: 'change'
          }, ],
          backProvinceCityCountry: [{
            required: true,
            message: '退货地详细地址',
            trigger: 'change'
          }, ],
        },
        allList: [],

        addressXz: [],
        propsObj: {
          label: 'text',
          value: 'value',
          option: 'children',
        },
        pastInventoryList: [],
        pastProductInfo: {},
        // 修改的
        updateInventoryList: [],
        // 新增的
        insertInventoryList: [],
        inventoryIdids: [],
        viewDialogVisible: false,
        viewGgData: [],
        editParams: {
          orderSerial: '',
          toUser: '',
          toPhone: '',
          backProvinceCityCountry: [],
          emsTo: '',
        },
        activities: [],
        dateRange: [],
      };
    },
    created() {
      this.getProductinfoNew()
      this.getOrderAddress()
    },
    methods: {
      getSHXMen(data) {
        let toProvince = this.getProvinceName(data.toProvince) ? this.getProvinceName(data.toProvince) : ''
        let toCity = this.getCityName(data.toCity) ? this.getCityName(data.toCity) : ''
        let toCounty = this.getCountyName(data.toCounty) ? this.getCountyName(data.toCounty) : ''
        let res = toProvince + toCity + toCounty
        return res
      },
      tableHeight() {
        return document.body.clientHeight - 280;
      },
      editInfo(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let params = {
              htEmsList: [{
                "orderSerial": this.editParams.orderSerial,
                "emsTo": this.editParams.emsTo,
                "toPhone": this.editParams.toPhone,
                "toUser": this.editParams.toUser,
                "toCity": this.editParams.toCity,
                "toCounty": this.editParams.toCounty,
                "toProvince": this.editParams.toProvince,
              }]
            }
            geteditList(params).then(response => {
              if (response.code == '200') {
                this.dialogInfoVisible = false
                this.getProductinfoNew()
              }
            });
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      backHandleChange(value) {
        this.editParams.toProvince = value[0]
        this.editParams.toCity = value[1]
        this.editParams.toCounty = value[2]
        console.log(value);
      },
      getOrderAddress() {
        getOrderAddress().then(response => {
          if (response.code == '200') {
            console.log(response, '测试')
            this.addressXz = JSON.parse(JSON.parse(response.data))
          }
        });
      },
      viewTrail(data) {
        console.log(data.context, 'context')
        console.log(JSON.parse(data.context))
        this.dialogVisible = true
        this.activities = JSON.parse(data.context)
        console.log(this.activities, '================================')
      },
      handleClose(data) {
        console.log(111)
      },
      userAddress(data) {
        this.editParams.orderSerial = data.orderSerial
        this.editParams.toUser = data.toUser
        this.editParams.toPhone = data.toPhone
        this.editParams.emsTo = data.emsTo
        this.editParams.toProvince = data.toProvince
        this.editParams.toCity = data.toCity
        this.editParams.toCounty = data.toCounty
        this.editParams.backProvinceCityCountry = [this.editParams.toProvince, this.editParams.toCity, this.editParams
          .toCounty
        ]
        this.dialogInfoVisible = true
      },
      // 0929 start
      getProductinfoNew() {
        let params = {
          pageNum: this.queryParams.pageNum,
          pageSize: this.queryParams.pageSize,
          orderSerial: this.queryParams.orderSerial,
          storeName: this.queryParams.storeName,
          toUser: this.queryParams.toUser,
          toPhone: this.queryParams.toPhone,
          emsTo: this.queryParams.emsTo,
          status: this.queryParams.status,
          params:{
            "userId":this.queryParams.userId
          }
        }
        // 回显规格接口
        getShopemsList(this.addDateRange(params, this.dateRange)).then(response => {
          if (response.code == '200') {
            this.loading = false
            this.productinfoList = response.data
            this.productinfoList.map(v => {
              let arr = v.htEmsList || []
              let params = arr.some(v => v.status === '15')
              if (params) {
                v.sendGoods = true
              } else {
                v.sendGoods = false
              }
            })
            console.log(this.productinfoList, 'this.productinfoList')
            this.total = response.total
          }
        });
      },

      viewDetails() {

      },

      shopAdd() {
        this.$router.push("/productinfoDetails");
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {
          storeName: '',
          productCode: '',
          productFlag: '',
          productName: '',
        };
        this.resetForm("form");
        this.xlsFile = [];
        this.fileListN = [];
        this.listNew = [];
        this.tableData = []

      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getProductinfoNew();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
    }
  };
</script>
<style>
  /* .el-table__row.expanded {
    display: none;
  } */
  .mesSty {
    height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: 6px;
    margin-bottom: 6px;
    /* align-items: center; */
  }

  .cell-ellipsis {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: left;
  }
</style>
